<template>
  <div class="dashboard-editor-container">
    <!--**********动态切换数据面板**************-->
    <panel-group :count="count" @handleSetchartDatas="handleSetchartDatas" />
    <!--**********折线图**************-->
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :cdata="chartData" />
    </el-row>
    <!--**********饼状图、柱状图**************-->
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <bar-chart :cdata="chartData" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <pie-chart :cdata="chartData" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import PanelGroup from "./dashboard/PanelGroup";
import LineChart from "./dashboard/LineChart";
import RaddarChart from "./dashboard/RaddarChart";
import PieChart from "./dashboard/PieChart";
import BarChart from "./dashboard/BarChart";

import { listArchivesBar } from "@/api/system/archives";
import { listEnginBar } from "@/api/system/engin";
import { listSearchBar } from "@/api/system/search";

var chartDatas = {
  // 数据组
  archData: {
    xData: [],
    seriesData: [],
    seriesName: "案卷数量"
  },
  engData: {
    xData: [],
    seriesData: [],
    seriesName: "项目数量"
  },
  searchData: {
    xData: [],
    seriesData: [],
    seriesName: "总搜索次数"
  }
};
export default {
  name: "Index",
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      // 计数
      count: {
        archCount: 0,
        engCount: 0,
        searchCount: 0
      },
      // 默认显示数据
      chartData: chartDatas.archData 
    };
  },
  created() {
    // 案卷量请求
    listArchivesBar().then(response => {
      var array = response.rows;
      for (let i in array) {
        this.count.archCount = this.count.archCount + array[i].value;
        chartDatas.archData.seriesData.push({
          value: array[i].value,
          name: array[i].name
        });
        chartDatas.archData.xData.push(array[i].name);
      }
    });
    // 项目量请求
    listEnginBar().then(response => {
      var array = response.rows;
      for (let i in array) {
        this.count.engCount = this.count.engCount + array[i].value;
        chartDatas.engData.seriesData.push({
          value: array[i].value,
          name: array[i].name
        });
        chartDatas.engData.xData.push(array[i].name);
      }
    });
    // 搜索量请求
    listSearchBar().then(response => {
      var array = response.rows;
      for (let i in array) {
        this.count.searchCount = this.count.searchCount + array[i].value;
        chartDatas.searchData.seriesData.push({
          value: array[i].value,
          name: array[i].name
        });
        chartDatas.searchData.xData.push(array[i].name);
      }
    });
  },
  methods: {
    // 动态切换数据面板
    handleSetchartDatas(type) {
      this.chartData = chartDatas[type];
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>